<html>
<head>



<script type="text/javascript" src="jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>

      <style> 
         #izq, #der{
            width: 50%; height: 200px;
         }
         #izq{float: left; background-color: blue;}
         #der{float: right;background-color: red;}
         #wrapp{width: 100%; height: 300px;}
        #drag,#res{width: 100px; height: 50px; float: left; border: 1px solid black;}        
      </style>
      
      
         <script>
$(function(){
         
           $('#der').draggable({
             drag: function(event,ui){
               $('#drag').html('LEFT: '+ui.position.left + ' ; TOP: '+ui.position.top);
             }
           });
    
         });
</script>


<script type="text/javascript">

function bla () {


document.getElementById("dragposition").setvalue=bla;

}
</script>


      
</head> 

   <body>
   

<input size="100"  type="text" id="dragposition" value=""> 


      <div id="wrapp"> 
         
         <div id="der"></div> 
      </div> 

          <div id="drag"></div>
          
          
<input type="button" onclick="bla()" value="los">


</body>

</html>
